<style lang="scss" scoped>
    .mshop-orders {
        padding-top: 92px;
        height: 100%;

        .search {
            position: fixed;
            width: 96%;
            top: 46px;
            left: 0;
            z-index: 1;
        }

        .container {
            height: 100%;
            overflow: auto;

            .delete-transition {
                transition: max-height .3s ease;
                max-height: 200%;
            }

             .delete-leave {
                max-height: 0;
                opacity: 0;
            }

            .item {
                background-color: white;

                &:nth-child(n + 2) {
                    margin-top: 10px;
                }

                .header {
                    padding: .4em .8em;
                    display: flex;
                    justify-content: space-between;

                    > span {
                        display: block;
                    }

                    .name {
                        &::after {
                            content: "";
                            display: inline-block;
                            width: .6em;
                            height: .6em;
                            border: 2px solid #666;
                            border-width: 2px 0 0 2px;
                            transform: rotate(135deg);
                        }
                    }

                    .state {
                        color: #F44336;
                    }
                }

                .content {
                    width: 100%;

                    @mixin price {
                        color: #F44336;

                        &::before {
                            content: '￥';
                            position: relative;
                            top: 1.4px;
                        }
                    }

                    .line {
                        padding: .4em 0;
                        display: flex;
                        justify-content: space-between;
                        width: 100%;

                        align-items: center;
                        width: 100%;
                        background-color: #F4EFEF;
                        border-bottom: 2px solid white;
                        font-size: 14px;

                        .left {
                            width: 80%; // 为了兼容微信space-bettwen显示bug，强制指定宽度
                            padding-left: .8em;
                            display: flex;
                            justify-content: flex-start;

                            .img {
                                border: 2px solid #ddd;
                                background-color: #fff;
                                border-radius: 4px;
                                height: 88px;
                                min-width: 88px;
                                max-width: 88px;
                                display: flex;
                                align-items: center;

                                img {
                                    max-width: 100%;
                                    max-height: 100%;
                                }
                            }

                            .info {
                                padding: 0 1em;
                                word-break: break-all;
                                display: flex;
                                flex-direction: column;
                                justify-content: space-around;

                                .variant {
                                    color: #888;
                                }
                            }
                        }

                        .right {
                            padding-right: .8em;
                            height: 100%;

                            .number {
                                padding: 0 .5em;
                                text-align: center;
                                display: flex;
                                flex-direction: column;
                                justify-content: space-between;
                                height: 100%;

                                .price {
                                    flex-basis: 2em;
                                    @include price;
                                }

                                .quantity {
                                    flex-basis: 2em;

                                    &::before {
                                        content: 'x';
                                        padding-right: 2px;
                                        position: relative;
                                        bottom: 1px;
                                    }
                                }
                            }
                        }
                    }

                    .content-footer {
                        text-align: right;
                        font-size: 14px;
                        padding: .4em 0;
                        margin-right: 1em;
                        box-shadow: 0 1px 0 rgba(0,0,0,.05),0 .5px 0 rgba(0,0,0,.09);

                        .price {
                            @include  price;
                        }
                    }
                }

                .footer {
                    display: flex;
                    justify-content: flex-end;
                    padding: .6em .4em;
                    font-size: 14px;

                    > span {
                        display: inline-block;
                        padding: .2em .5em;
                        margin: 0 .4em;
                        border: 1px solid #888;
                        border-radius: .3em;

                        &:active {
                            $activeColor: #9E9E9E;
                            background-color: $activeColor;
                            border-color: $activeColor;
                            color: white;
                        }
                    }
                }
            }
        }
    }
</style>

<template>
    <div class="mshop-orders" >
        <searchbar class="search" :action="do_search" ></searchbar>
        <infinite-scroll :action="infinite_action">
            <div class="container">
                <div v-for="order in orders" class="item" v-if="order.state != 'cancel'" transition="delete">
                    <div class="header">
                        <span
                            class="name"
                            v-link="{path: 'order', query: { order_id: order.id}, append: true}">
                            {{ order.name }}
                        </span>
                        <span class="state">{{ order.current_state }}</span>
                    </div>

                    <div class="content">
                        <div class="line" v-for="line in order.order_line">
                            <div class="left" v-link="{path: 'order', query: { order_id: order.id}, append: true}">
                                <div class="img" >
                                    <img :src="line.product_img" />
                                </div>

                                <div class="info">
                                    <p class="title">{{ line.name }}</p>
                                    <p class="variant">{{ line.variant }}</p>
                                </div>
                            </div>

                            <div class="right">
                                <div class="number">
                                    <price :price="line.price_unit" :ratio="order.redeem_ratio"></price>
                                    <p class="quantity">{{ line.product_uom_qty }}</p>
                                </div>
                            </div>
                        </div>

                        <div class="content-footer">
                            <span>共{{ order.amount_qty }}件商品</span>
                            <span>合计:<price :price="order.amount" :ratio="order.redeem_ratio"></price></span>
                            <span v-if="order.amount_tax">(含税<price :price="order.amount_tax" :ratio="order.redeem_ratio"></price>)</span>
                        </div>
                    </div>

                    <div class="footer" v-if="order.state != 'cancel'">
                        <span v-if="['draft', 'done', 'cancel'].indexOf(order.state) < 0">查看物流</span>
                        <span v-if="order.state === 'draft'" @click="do_click(order)">取消意向单</span>
                        <span v-if="order.state === 'done'">评价</span>
                    </div>
                </div>
            </div>
        </infinite-scroll>

        <confirm
            :show.sync="show_confirm"
            @on-confirm="confirm_delete"
            title="确认删除"
            cancel-text='取消'
            confirm-text="确认">
            <p style="text-align:center">确认取消当前订单吗？</p>
        </confirm>
    </div>
</template>

<script>
    import orderService from 'services/order'
    import InfiniteScroll from 'util-components/infinite-scroll.vue'
    import Searchbar from 'util-components/searchbar.vue'
    import Price from 'util-components/price.vue'
    import Confirm from 'vux-components/confirm'
    import cacheIniniteFactory from 'lib/cache-infinite'
    import objectUtil from 'util/object'

    const temp_orders = {
        orders: [
            { id: 1, state: 'draft', name: 'SO0001', current_state: '已发货', amount_tax: 129, order_line: [
                {product_img: '/static/4.jpeg', name: '守望先锋普通版XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', variant: '版本：普通，大小：小', price_unit: 198, product_uom_qty: 2},
                {product_img: '/static/4.jpeg', name: '守望先锋普通版', variant: '版本：普通，大小：小', price_unit: 198, product_uom_qty: 2},
            ], amount_qty: 4, amount: 792},
            { id: 2, state: 'done', name: 'SO0001', current_state: '已发货', order_line: [
                {product_img: '/static/4.jpeg', name: '守望先锋普通版XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', variant: '版本：普通，大小：小', price_unit: 198, product_uom_qty: 2},
                {product_img: '/static/4.jpeg', name: '守望先锋普通版', variant: '版本：普通，大小：小', price_unit: 198, product_uom_qty: 2},
            ], amount_qty: 4, amount: 792},
            { id: 2, state: 'done', name: 'SO0001', current_state: '已发货', order_line: [
                {product_img: '/static/4.jpeg', name: '守望先锋普通版XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', variant: '版本：普通，大小：小', price_unit: 198, product_uom_qty: 2},
                {product_img: '/static/4.jpeg', name: '守望先锋普通版', variant: '版本：普通，大小：小', price_unit: 198, product_uom_qty: 2},
            ], amount_qty: 4, amount: 792},
                        { id: 2, state: 'done', name: 'SO0001', current_state: '已发货', order_line: [
                {product_img: '/static/4.jpeg', name: '守望先锋普通版XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', variant: '版本：普通，大小：小', price_unit: 198, product_uom_qty: 2},
                {product_img: '/static/4.jpeg', name: '守望先锋普通版', variant: '版本：普通，大小：小', price_unit: 198, product_uom_qty: 2},
            ], amount_qty: 4, amount: 792},
                        { id: 2, state: 'done', name: 'SO0001', current_state: '已发货', order_line: [
                {product_img: '/static/4.jpeg', name: '守望先锋普通版XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', variant: '版本：普通，大小：小', price_unit: 198, product_uom_qty: 2},
                {product_img: '/static/4.jpeg', name: '守望先锋普通版', variant: '版本：普通，大小：小', price_unit: 198, product_uom_qty: 2},
            ], amount_qty: 4, amount: 792},
        ],
        state: 'draft',
        max: 200,
    }

    export default {
        data: () => ({
            orders: [],
            state: '',
            max: Infinity,
            cache: new cacheIniniteFactory(),
            search_value: '',
            show_confirm: false,
        }),
        components: {
            InfiniteScroll,
            Searchbar,
            Confirm,
            Price
        },
        computed: {
            numbers () {
                return this.orders.length;
            }
        },
        methods: {
            infinite_action() {
                if (this.numbers < this.max) {
                    return this.add_order().then(data => {
                        for (const order of data.orders) {
                            this.orders.push(order);
                        }
                    });
                }
            },
            do_search (value) {
                this.search_value = value.join(' ');
                this.add_order({
                    offset: 0,
                    querys: this.search_value,
                }).then(data => {
                    this.max = data.max;
                    this.orders = data.orders;
                })
            },
            _generate_key(params) {
                return JSON.stringify(params);
            },
            add_order(options) {
                const params = Object.assign({
                    offset: this.numbers,
                    limit: 10,
                    querys: this.search_value,
                    state: this.state,
                }, options);

                let cache_history;

                const key = this._generate_key(params);

                if (this.cache.has(key)) {
                    cache_history = this.cache.get(key);
                    if (cache_history.has(params.offset)) {
                        return Promise.resolve(cache_history.get(params.offset));
                    }
                }

                return orderService
                    .fetchs(params.offset, params.state, params.querys)
                    .then(({data}) => data, () => temp_orders)
                    .then(data => {
                        return objectUtil.deep_clone(data);
                    })
                    .then(data => {
                        if (cache_history) {
                            cache_history.set(params.offset, data);
                        } else {
                            this.cache.set(key, params.offset, data);
                        }

                        return data;
                    })
            },
            do_click (order) {
                this.delete_order = order;
                this.show_confirm = true;
            },
            confirm_delete () {
                this.delete_order.state = 'cancel';
                orderService.delete(this.delete_order.id);
            }
        },
        route: {
            data: function ({to}) {
                return this.add_order({state: to.query.state, offset: 0})
            }
        }
    }
</script>
